import React, { Suspense } from 'react'
import { useRoutes,useLocation,useNavigate } from 'react-router-dom'
import { routes } from './router/routes'
import "./App.css"
import { Badge, TabBar, SearchBar } from 'antd-mobile'

import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export default function App() {
  let location = useLocation()  // 
  let navigate = useNavigate()  // 可以进行编程式导航
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key:'/car',
      title:'购物车',
      icon: <UnorderedListOutline />
    },
    {
      key: localStorage.getItem('token') ? '/my' : '/login' ,
      title: localStorage.getItem('token') ? '我的' : '登录' ,
      icon: <UserOutline />,
    },
  ]
  return (
    <div className='app'>
      
      <Suspense fallback={<div>loading...</div>}>
        {useRoutes(routes)}
      </Suspense>
      
      {/* 嵌套组件运用了 props.鹊鸲准 */}
      
      <TabBar className='nav' activeKey={location.pathname} onChange={(value)=>navigate(value)} 
      style={{display:['/car','/my','/detail'].some(path => location.pathname.startsWith(path))?'none':'block'}}>
          {/* value 可以拿到最新的key值 */}
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

/*
includes
*/